include(['init', 'PathPainter'], function(){
	declare('PathMenu');
	
	addOrientationChangedListener(function(o){
		$('#lowerMenu').css('top', window.innerHeight - 65);
	});

	var pathPainter = new PathPainter({baseUrl:baseUrl});

	var painted = {};
	var erased  = {};
		
	var paint = function(e){
		var cell = eGrid.getCell(e.x, e.y)
		if( !cell ) return;

		pathPainter.paint(cell);
	};
	
	var erase = function(e){
		var cell = eGrid.getCell(e.x, e.y)
		if( !cell ) return;

		pathPainter.erase(cell);
	};
	
	var layerMove = function(e){
		var MAX = 1000;
		var sX = e.bId.lastX || e.bId.x;
		var sY = e.bId.lastY || e.bId.y;
		
		var moveX = e.x-sX;
		moveX = Math.abs(moveX) > MAX ? MAX*(moveX/Math.abs(moveX)) : moveX;
		var moveY = e.y-sY;
		moveY = Math.abs(moveY) > MAX ? MAX*(moveY/Math.abs(moveY)) : moveY;
		
		e.bId.lastX = e.x;
		e.bId.lastY = e.y;
		
		eGrid.translate(moveX, moveY);
	};
		
	var currentMethod = null;
	
	inputManager.addListener("pathMenu", {
        hideMenu : function(){
            $('#lowerMenu').hide();
            inputManager.lock(null);
            currentMethod = null;
            if(pathSelectionDialog) pathSelectionDialog.remove();
            pathSelectionDialog = null;
            $('.loaded-cell').each(function(){
                $(this).removeClass('edit-grid');
            });
        },
        showMenu : function(){
            $('#lowerMenu').load(baseUrl+'menu/path', function(){
                $('#lowerMenu').show();
                $('#lowerMenu').width('95%');
                inputManager.lock('pathMenu');
                currentMethod = layerMove;
                attachMenuListeners();
            });
        },
        onButtonDown : function(e){
            this.onMove(e);
        },
        onMove : function(e){
            if(e.bId && currentMethod) currentMethod(e);
        },
        onMenu : function(e){
            if( e.bId == 'pathButton'){
                if( e.buttons )
                    this.hideMenu();
                else
                    this.showMenu();
            }
        }
	});
	
	var pathSelectionDialog = null;
	var currentPath = null;
	
	var onItemsLoaded = function(){
		$('.pathSegments > a', pathSelectionDialog).click(function(){
			onItemSelected($(this));
		});
		$('.pathSegments > div > a', pathSelectionDialog).click(function(){
			onItemSelected($(this));
		});
	};
	var onItemSelected = function(item){
		pathSelectionDialog.hide();
		var pathId = item.attr('pathId');
		var name = item.attr('pathName');
		var fill = item.attr('fill');
        var postFill = item.attr('postFill');
        var url2 = baseUrl + 'path/show?style=large&name=' + name + '&id=' + pathId + '&fill=' + fill;
		$('#pathSelector').load(url2, function(){
			
		});
		
		currentPath.load(baseUrl+'path/show?style=small&name=' + name + '&id=' + pathId + '&fill=' + fill + '&postFill=' + postFill);
		currentPath.attr('pathId', pathId);
		currentPath.attr('active', 'true');
		currentMethod = paint;
		pathPainter.pathId = pathId;
		pathPainter.fill = fill == 'true'
        pathPainter.fillOnTop = postFill == 'true';
	};
	
	var createPathSelectionDialog = function(){
		var div = $(document.createElement('div'));
		div.css('position', 'absolute');
		div.css('top', -100);
		div.css('left', '5px');
		div.css('background', 'white');
		div.css('z-index', '2000');
		var url = baseUrl + "path/list"
		div.load(url, function(){
			onItemsLoaded();
		});
		$('#lowerMenu').append( div );
		$('.loaded-cell').each(function(){
			$(this).addClass('edit-grid');
		});
		return div;
	};
	
	var attachMenuListeners = function(){
		$('#actionPaint').click(function(){
			if(!pathSelectionDialog){
				pathSelectionDialog = createPathSelectionDialog();
			}else{
				pathSelectionDialog.show();
			}
		});
		$('#actionErase').click(function(){
			$('.loaded-cell').each(function(){
				$(this).addClass('edit-grid');
			});		
			currentMethod = erase;
		});
		
		currentPath = $("#currentPath > span");
		$("#currentPath").click(function(){
			$('#pathSelector').show();
		});
	};
	
})